import React, { Component } from 'react'
import { Card, Table, Tag, Space, Button, Select, Input } from 'antd';
import { getAllGoodsAPI } from '../../apis/goodsAPI';
import { searchGoodsAPI } from '../../apis/goodsAPI';
import { Link } from 'react-router-dom';
const { Option } = Select
export default class index extends Component {
    state = {
        data: [], searchType: '',
        searchData: '',
    }
    getAllGoods = async () => {
        const res = await getAllGoodsAPI()
        console.log(res);
        this.setState({ data: res.data.data })
    }
    changeItem() {

    }
    searchGoods = async () => {
        const { searchData, searchType } = this.state
        const res = await searchGoodsAPI({ searchData, searchType })
        console.log('searchGoods()', res);
        this.setState({ data: res.data.data })
    }
    componentDidMount() {
        this.getAllGoods()

    }
    render() {
        // list
        const { data } = this.state
        const columns = [
            {
                title: '商品名字',
                dataIndex: 'name',
                key: 'name',
                render: text => {

                    return <a>{text}</a>
                },
            },
            {
                title: '商品标题',
                dataIndex: 'title',
                key: 'title',

            },
            {
                title: '类别',
                dataIndex: 'type',
                render: rowData => rowData.name
            },

            {
                title: '操作',
                key: '',
                dataIndex: '',
                render: rowData => {

                    return (
                        <>
                            {<Button className="ant-btn-primary" >{rowData.state == 1 ? '点击下架' : '点击上架'}</Button>}
                            &nbsp; &nbsp; &nbsp;
                            <Button>删除</Button>
                        </>
                    )
                },
            },

        ];
        //顶部搜索框
        const searchCom = (
            <div>
                <Select value={this.state.searchType} onChange={(value) => this.setState({ searchType: value })} style={{ width: 80, marginRight: 10 }}>
                    <Option value='name'>名称</Option>
                    <Option value='title'>标题</Option>
                </Select>
                <Input value={this.state.searchData} onChange={(e) => this.setState({ searchData: e.target.value })} style={{ width: 212, marginRight: 10 }}></Input>
                <Button onClick={this.searchGoods}>搜索</Button>
            </div>
        )
        return (
            <div>
                <Card title={searchCom} extra={<Button ><Link to="/home/product/item/addItem">添加</Link></Button>} style={{ width: "100%" }}>
                    <Table rowKey="_id" columns={columns} dataSource={data} pagination={{ defaultPageSize: 5, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: ['5', '10', '15', '20'] }} />
                </Card>
            </div>
        )
    }
}
